<div class="page-body">
    <div class="row">
        <div class="col-xs-12 col-md-12">
            <div class="widget">
                <div class="widget-header
            <switch name="T_type">
                <case value="1">bg-magenta</case>
                <case value="2">bg-palegreen</case>
                <case value="3">bg-lightred</case>
                <case value="4">bg-blue</case>
                <case value="5">bg-blueberry</case>
                <case value="6">bg-gold</case>
                <default />bg-magenta
            </switch>
                                ">
                <span class="widget-caption">{$T_title|default=CONTROLLER_NAME}</span>
                                <!--Widget Buttons-->
            </div>
                <div class="widget-body">
                    <div class="table-toolbar">
                        <div class="row">
                            <div class="col-xs-12 col-md-4">
                                <form method="get" action="{:U('index')}" class="form-inline" role="form">
                                    <div class="form-group">
                                    <span class="input-icon" style="width: 200px;">
                                        <input type="text" class="form-control input-sm" placeholder="条形码，书名"
                                               name="keywords" value="{$Think.get.keywords}">
                                        <i class="glyphicon glyphicon-search blue"></i>
                                    </span>
                                        <button class="btn btn-info">搜索</button>
                                    </div>
                                </form>
                            </div>
                            <div class="col-xs-12 col-md-8">
                                <span class="label label-info">用户记录</span>
                                <select class="record_state" onchange="updatestate()">
                                    <option value="2">全部</option>
                                    <option value="1">已归还</option>
                                    <option value="0">在借</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-md-4">
                            <table class="table table-bordered table-striped table-condensed flip-content">
                                <thead class="flip-content bordered-palegreen">
                                <tr>
                                    <th>ID</th>
                                    <th>条码</th>
                                    <th>书名</th>
                                    <th>定价</th>
                                </tr>
                                </thead>
                                <tbody>
                                <volist name="data" id="v">
                                    <tr onclick="getRecord($(this),{$v.book_id})">
                                        <td>
                                            {$v.book_id}
                                        </td>
                                        <td>
                                            条码：{$v.tm}<br>
                                            新华码：{$v.spbs}
                                        </td>
                                        <td>
                                            <!--<img src="{$v.b_logo}" width="100"><br>-->
                                            书名：{$v.sm}<br>
                                            作者：{$v.zyz}
                                        </td>
                                        <td>
                                            ￥{$v.dj}
                                        </td>
                                    </tr>
                                </volist>
                                </tbody>
                            </table>
                            {$page}
                            <form class="form-inline" method="post">
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon">设置页码</div>
                                        <input class="form-control" type="text" placeholder="" name="p" value="{$Think.get.p}" style="width: 60px;">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-xs-12 col-md-8">
                            <table class="table table-striped table-hover">
                                <thead class="flip-content bordered-palegreen">
                                <tr>
                                    <th>卡号</th>
                                    <th>孩子</th>
                                    <th>父亲</th>
                                    <th>母亲</th>
                                    <th>绑定微信号</th>
                                    <th>借阅相关</th>
                                </tr>
                                </thead>
                                <tbody class="recordlist">

                                </tbody>
                                <tfoot class="page-selector">
                                <tr>
                                    <th colspan="2">
                                        共<span class="total">1</span>页，当前第<span class="page">1</span>页
                                    </th>
                                    <th colspan="6">
                                        <select onchange="updateselect()">
                                            <option value="1">1</option>
                                        </select>
                                    </th>
                                </tr>
                                </tfoot>
                            </table>
                            <!--{$page}-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    var $book_id;
    var $is_backed=0; //分类，2:全部;1:已归还;0:在借
    function getRecord($this,$bookid){
        $this.parent().find("tr").removeClass("success");
        $this.addClass("success");
        $book_id=$bookid;
        $(".page-selector select").html("");
//        log($book_id);
        $is_backed=2;
        $('select.record_state').val($is_backed);
        updateselect();
    }
    //更新分页数据
    function updateselect(){
        var $page=$(".page-selector select").val();
        $.post("{:U('rentUser')}",{"book_id":$book_id,"page":$page,"is_backed":$is_backed},function(data){
            $(".recordlist").html("");
            if(data.data.length==0){
                $(".recordlist").html("暂无记录");
                data.total=1;
                data.page=1;
            }
            $.each(data.data,function(i,item){
                if(item.card_id==null){
                    item.card_id="暂无";
                }
                if(item.child_name==null){
                    item.child_name="暂无";
                }
                if(item.father_name==null){
                    item.father_name="暂无";
                }
                if(item.father_phone==null){
                    item.father_phone="暂无";
                }
                if(item.mother_name==null){
                    item.mother_name="暂无";
                }
                if(item.mother_phone==null){
                    item.mother_phone="暂无";
                }
                if(item.openid==null){
                    item.nickname="暂无";
                }
                var $str='<tr>' +
                        '<td>'+item.card_id+'</td>' +
                        '<td>'+item.child_name+'</td>' +
                        '<td>'+item.father_name+'/'+item.father_phone+'</td>' +
                        '<td>'+item.mother_name+'/'+item.mother_phone+'</td>' +
                        '<td>'+item.nickname+'</td>' +
                        '<td>'+item.rent_record.rent_state+'</td>' +
                        '</tr>';
                $(".recordlist").prepend($str);
            });
            updatepage(data);
        },"json");
    }
    //更新分页器
    function updatepage(data){
        $(".page-selector select").html("");
        $(".page-selector .total").html(data.total);
        $(".page-selector .page").html(data.page);
        for(var i=1;i<=data.total;i++){
            if(i==data.page){
                $option='<option value="'+i+'" selected="selected">'+i+'</option>';
            }else{
                $option='<option value="'+i+'">'+i+'</option>';
            }
            $(".page-selector select").append($option)
        }
        $(".page-selector .total").html(data.total);
    }

    //更新分类
    function updatestate(){
        $is_backed=$('select.record_state').val();
        $(".page-selector select").html("");
        updateselect();
    }
</script>